<template>
    <div class="main-app">
        <ToolsBar :has-selected-code="hasSelectedCode" @add-data="addCarInfo" @export-data="exportCarExcel" />
        <div class="main-container" id="data-table-main-container" p-10px m-10px rounded-4 bg-white relative overflow-hidden
            dark="bg-dark border border-solid">
            <DataTable :data="carData" @save-data="saveCarInfo" @delete-data="deleteCarInfo" :columns="ColumnsData" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { useCarStore } from "~/src/store"
import ToolsBar from "./components/ToolsBar.vue"
import DataTable from "@/components/common/DataTable.vue"
import { carInfo } from "@/constant"
import { exportXlsx } from "@/utils"

const carStore = useCarStore()

const ColumnsData: DataTable.ColumnType[] = carInfo.map((item: DataTable.ColumnType) => ({ ...item, width: 200 }))

const hasSelectedCode = ref<boolean>(false)

// 车辆表格数据
const carData = ref<DataTable.TableData[]>(carStore.carInfoList.map((carInfo, index) => ({
    key: index,
    ...carInfo
})))

// 新增车辆信息
function addCarInfo(carInfo: Car.CarInfo) {
    carStore.addCarInfo(carInfo)
}

// 保存车辆信息
function saveCarInfo(carInfo: DataTable.TableData) {
    carStore.editCarInfo(Number(carInfo.key), { ...carInfo, key: undefined } as any)
}

// 删除车辆信息
function deleteCarInfo(index: number) {
    carStore.deleteCarInfo(index)
}

// 导出加油单
function exportCarExcel(carInfo: Car.CarInfo) {
    exportXlsx({ ...carStore.getCarInfo(carInfo.frameNumber), ...carInfo })
}
</script> 

<style scoped lang="scss">
.main-app {
    border-color: rgba(#fff, .09);
    overflow: auto;
}

.main-container {
    height: calc(100vh - 150px);
}
</style>
  
  